﻿@using WebApp.Extensions
@model Dto.ApiResponses.ContactResponses.ContactDetailResponse
@{
    ViewBag.CurrentPage = WebApp.Common.PageSetting.ContactEditPageSetting;
    var sectionId = Request.IsAjaxRequest() ? "Ajax" : "View" + "_Contact_Edit_" + Model.Detail.Id;
}

@section Scripts{
    <script type="text/javascript">
        require(['Contact/Edit', 'Util'], function (api, util) {
            var model = util.toJS(@(Html.ToJson(Model)));
            $(function () { api.exec('@sectionId', model); });
        });
    </script>
}

<div class="container" data-bind="stopbinding: true">
    <section id="@sectionId">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                <legend class="h3">Personal Detail</legend>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-10">
                            <label for="photo">Photo</label>
                            <div class="fileDragHolder">
                                <canvas id="imgCanvas" width="150" height="187"></canvas>
                                <div>
                                    <a id="photo" href="#" data-bind="click: selectPhoto">Select File</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-10">
                            <label for="name">Name</label>
                            <input type="text" id="name" class="form-control " data-bind="value : name" required />
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-10">
                            <label for="name">Name</label>
                            <select id="name" class="form-control" data-bind="options: titleNames, optionsText: 'name', value: titleName,optionsValue: 'name', optionsCaption: '-- Select Type --'" required></select>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-10">
                            <label for="Fname"> first name</label>
                            <input id="Fname" type="text" class="form-control " data-bind="value :firstName " required />
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-10">
                            <label for="Lname">Last Name</label>
                            <input id="Lname" type="text" class="form-control " data-bind="value : lastName" required />
                        </div>
                    </div>
                </div>
                
            </div>
            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                <legend class="h3">Contact Detail</legend>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-10">
                            <label for="email">Email</label>
                            <input id="email" type="text" class="form-control" data-bind="value : email" required />
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-10">
                            <label for="phone">Phone</label>
                            <input id="phone" type="text" class="form-control" data-bind="value : phone" />
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-10">
                            <label for="mobile">Mobile</label>
                            <input id="mobile" type="text" class="form-control" data-bind="value : mobile" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                <legend class="h3">Other Detail</legend>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-10">
                            <label for="cname">Company Name</label>
                            <input id="cname" type="text" class="form-control " data-bind="value : companyName" />
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-10">
                            <label for="designation">Designation</label>
                            <select id="designation" class="form-control" data-bind="options: designations, optionsText: 'name', value: designation,optionsValue: 'name', optionsCaption: '-- Select Type --'" required></select>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-10">
                            <label for="description">Description</label>
                            <textarea id="description" class="form-control" rows="3" data-bind="value : description"></textarea>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row  center">
            <button class="btn btn-primary btn-lg" data-bind="click:submit">Submit</button>&nbsp;&nbsp;&nbsp;&nbsp;<button class="btn btn-primary btn-lg" data-bind="click:cancel">Cancel</button>
        </div>
    </section>
</div>